<template>
  <Main class="page-wrapper">
    <van-nav-bar
      title="Details"
      class="variables-header-wrapper"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <div class="card details-card variables-wrapper">
      <div class="details-info">
        <div class="cover">
          <BookCover :src="bookData.avatar" />
        </div>
        <div class="book-info">
          <p class="book-name not-select primary-color">{{ bookData.name || 'Unknown' }}</p>
          <p class="info-item not-select help-color">{{ bookData.author || 'Unknown' }}</p>
          <p v-if="bookData.endflag === '0'" class="info-item not-select help-color">Status: Updating</p>
          <p v-if="bookData.endflag === '1'" class="info-item not-select help-color">Status: Completed</p>
          <!-- <p class="info-item not-select">Updating</p> -->
          <!-- <p class="info-item not-select">Recent update: 19mins before</p> -->
          <p class="info-item not-select help-color">Recent update: {{ bookData.updatetime | parseTime }}</p>
        </div>
      </div>
      <div class="tag-list not-select">
        <span class="tag-item" v-for="item in [bookData.category]" :key="item">{{item}}</span>
      </div>
      <div class="read-btn-wrapper">
        <div class="read-btn" @click="checkReadStatus">Read Now!</div>
        <!-- <van-icon v-if="!inFavorite" class="favorite-btn" name="like-o" @click="goLike" />
        <van-icon v-if="inFavorite" class="favorite-btn" name="like" @click="goUnlike" /> -->
      </div>
    </div>
    <div class="card card-last brief-wrapper variables-wrapper">
      <p class="brief-title primary-color">Brief Introduction</p>
      <p class="brief-content help-color" @click="gotoBriefIntroduction">{{ bookData.description }}</p>
      <div class="catalogue-wrapper" @click="gotoCatalogue">
        <span class="catalogue-title primary-color">Catalogue</span>
        <!-- <span class="catalogue-info help-color">Updating Chapter 6: She</span> -->
        <van-icon name="arrow" />
      </div>
    </div>

    <van-popup
      v-model="overlayVisible"
      :close-on-click-overlay="false"
      position="bottom"
      round
    >
      <Charge-Popup-Content
        :text="priceText"
        @yes="onYesRead"
        @no="onNotRead"
      />
    </van-popup>

    <PageFooter />
  </Main>
</template>

<script>
import { Popup } from 'vant'
import Main from '@/views/layouts/index.vue'
import BookCover from '@/components/book-cover.vue'
import PageFooter from '@/components/page-footer.vue'
import { getBookDetail, trackingPayment, trackingPagePv } from '@/api'
import { addFavoriteItem, findFavoriteItem, removeFavoriteItem } from '@/utils/favorite'
import ChargePopupContent from '@/components/charge-popup-content'
import { setItem } from '@/utils/storage'
import { findReadItem } from '@/utils/read-record'
import { timeText } from '@/utils/time-text'

export default {
  components: {
    Main,
    BookCover,
    PageFooter,
    ChargePopupContent,
    [Popup.name]: Popup
  },

  computed: {
    id() {
      return this.$route.query ? this.$route.query.id : ''
    },
    priceText() {
      return `As low as $${this.bookData.price} unlock and read the whole book ?`
    }
  },

  filters: {
    parseTime(val) {
      // return parseTime(val) || '-'
      return timeText(val) || '-'
    }
  },

  data() {
    return {
      inFavorite: false,
      overlayVisible: false,
      bookData: {}
    }
  },

  created() {
    if (this.id) {
      this.getBook()
      this.uploadTrackingPv()
    }
  },

  methods: {
    getBook() {
      getBookDetail({
        id: this.id
      }).then(res => {
        const { data } = res
        if (data) {
          this.bookData = data || {}
          this.inFavorite = findFavoriteItem(data)
          this.overlayVisible = !!data.price
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    uploadTrackingPv() {
      const bookid = this.id
      trackingPagePv({
        bookid,
        chapaterid: null
      }).then(res => {
        console.log('PV Tracking Done!')
        console.log(res)
      })
    },
    uploadTrackingPayment() {
      const bookid = this.id
      const price = this.bookData.price
      trackingPayment({
        bookid,
        chapaterid: null,
        price
      }).then(res => {
        console.log('Payment Tracking Done!')
        console.log(res)
      })
    },
    onYesRead() {
      this.uploadTrackingPayment()
      this.overlayVisible = false
      this.gotoReadPage()
    },
    onNotRead() {
      this.overlayVisible = false
    },
    goLike() {
      this.$toast.success('Add to Favorite')
      addFavoriteItem(this.bookData)
      this.inFavorite = true
    },
    goUnlike() {
      removeFavoriteItem(this.bookData)
      this.inFavorite = false
    },
    gotoCatalogue() {
      this.$router.push({
        name: 'Catalogue',
        query: {
          id: this.id,
          bookName: this.bookData.name
        }
      })
    },
    gotoBriefIntroduction() {
      if (this.bookData.description) {
        setItem('BRIEF_DESC', this.bookData.description)
      }
      this.$router.push({
        name: 'BriefIntroduction'
      })
    },
    checkReadStatus() {
      if (this.bookData.price) {
        this.overlayVisible = true
      } else {
        this.gotoReadPage()
      }
    },
    gotoReadPage() {
      const id = this.bookData.nextid
      if (!id) {
        return this.$toast('Updating...')
      }
      // eslint-disable-next-line no-unused-vars
      const existsRecord = findReadItem(this.bookData.id)
      const query = {}
      // if (existsRecord) {
      //   query.id = existsRecord.chapterId
      // } else {
      //   query.id = id
      // }
      query.id = id
      this.$router.push({
        name: 'Read',
        query
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  background-color: #f8f8f8 !important;
}

.card {
  // border-bottom-right-radius: 10px;
  // border-bottom-left-radius: 10px;
  margin-bottom: 4px;
  padding: 10px 12px;
  background-color: #fff;

  &.card-last {
    margin-bottom: 0px;
  }
}

.details-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.details-card {

  .cover {
    width: 100px;
    height: 130px;
    margin-right: 20px;
  }

  .book-info {
    flex: 1;

    .book-name {
      margin: 10px 0;
      font-size: 16px;
      // color: inherit;
      // color: #4d4d4d;
    }

    .info-item {
      // color: #525e71;
      // color: inherit;
      font-size: 14px;
      line-height: 1.75;
    }
  }
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  .tag-item {
    padding: 4px 6px;
    border-radius: 4px;
    color: #f2f2f7;
    background-color: #ab90a2;
    margin-right: 4px;
    margin-bottom: 4px;
  }
}

.read-btn-wrapper {
  display: flex;
  margin: 10px 0;
  justify-content: space-between;
  align-items: center;

  .read-btn {
    flex: 1;
    padding: 10px 0;
    // margin-right: 20px;
    font-size: 18px;
    background-color: #d98ac6;
    color: #fff;
    border-radius: 14px;
    text-align: center;
  }

  .favorite-btn {
    font-size: 30px;
    color: #d98ac6;
  }
}

.brief-wrapper {
  padding-bottom: 0;

 .brief-title {
    position: relative;
    padding-left: 10px;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.75;
    // color: #373737;

   &::before {
      position: absolute;
      content: '';
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      // height: 20px;
      background-color: skyblue;
   }
  }
  .brief-content {
    min-height: 32px;
    padding-bottom: 10px;
    // color: #373737;
    line-height: 1.75;
  }

 .catalogue-wrapper {
    position: relative;
    display: flex;
    // padding-top: 14px;
    // padding-bottom: 8px;
    padding: 14px 0;
    justify-content: space-between;
    align-items: center;
    color: #848484;

    &::after {
      position: absolute;
      content: '';
      top: 0;
      left: -10px;
      right: -10px;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      -webkit-transform-origin:0 0;
      overflow: hidden;
      background-color: #bbb;
    }

   .catalogue-title {
      // color: #373737;
      font-size: 16px;
   }
   .catalogue-info {
      flex: 1;
      text-align: right;
      padding-right: 10px;
   }
 }
}
</style>
